import React from 'react'
import style from './style'
import { success, Modal, Link, TitleBar, Table, Button, info } from '../../ui-components'
import cx from 'classnames'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../actions/review.action'
import { connect } from 'react-redux'
import moment from 'moment'
moment.locale('zh-cn')
var ReactTooltip = require("react-tooltip")

export default
@connect(({ review }) => ({ review }), dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class ReviewPeer extends React.Component {

  state = {
    refuseInvitation: false,
    readyRefusedInvitationId: null
  }

  static contextTypes = {
    router: React.PropTypes.object
  }
  pageSize=30
  pageNumber=1
  handlePageChange(_pageNumber) {
    const { pageNumber, ...others } = this.props.location.query
    this.props.router.push(`/review/self/all?pageNumber=${_pageNumber}&${util.body(others)}`)
  }
  doFetch() {
    info('读取中...', true)
    const pageNumber = this.props.location.query.pageNumber || this.pageNumber
    this.props.fetchPendingPeerReviews({
      pageNumber,
      pageSize: this.pageSize
    }, () => {
      info()
    })
  }
  componentDidMount() {
    this.doFetch()
  }

  refuseInvitation() {
    this.props.actions.refuseInvitation(this.state.readyRefusedInvitationId, ()=> {
      this.props.actions.fetchPendingPeerReviews()
      success('删除邀请成功!')
    })
    this.setState({
      readyRefusedInvitationId: null,
      refuseInvitation: false
    })
  }

  handleRefuse(invitationId) {
    this.setState({
      refuseInvitation: true,
      readyRefusedInvitationId: invitationId
    })
    /*
    if (confirm('确定拒绝对方的反馈邀请？')) {
      this.props.actions.refuseInvitation(invitationId, ()=> this.props.actions.fetchPendingPeerReviews() )
    }
    */
  }
  render() {
    const {pendingPeerReviews} = this.props.review
    const subordinateTable = {
      pagin: typeof totalNumber === 'number' && {
        pageSize: this.pageSize,
        pageNumber: this.props.location.query.pageNumber || this.pageNumber,
        totalNumber,
        onChange: ::this.handlePageChange,
        fetch: ::this.doFetch
      },
      model: {
        templateName: '反馈活动名称',
        reviewee: '被反馈人',
        cycle: '工作阶段',
        peerReviewDeadline: '同事反馈截止日',
        publicDeadline: '流程结束',
        others: ''
      },
      config: {
        templateName: 1.4,
        reviewee: .6,
        status: .5,
        cycle: 1.5,
        peerReviewDeadline: .95,
        publicDeadline: .6
      },
      data: pendingPeerReviews,
      map: {
        others: (_, args) => {
          return (
            <div style={{width: "90px", display: 'flex', flexDirection: 'column', alignItems: 'center'}} data-role="table-hover" data-tip={args.isInActive ? '请等待该同事提交自评' : ''}>
              <ReactTooltip multiline effect="solid" />
              <Link style={args.isInActive? {color:'#8CA9C5'}: {color:'#8CA9C5',opacity: '1'}} label="点击反馈" onClick={() => !args.isInActive && this.context.router.push(`/review/item/${args.invitationId}/invitations`)} disabled={args.isInActive}/>
            </div>
          )
        },
        reviewee: (_, args) => {
          return args.revieweeUserProfile.fullName
        },
        cycle: (_, args) => {
          return moment(args.startTime).format('YYYY.MM.DD') + '~' + moment(args.endTime).format('YYYY.MM.DD')
        },
        peerReviewDeadline: (value) => {
          return moment(value).format('YYYY.MM.DD')
        },
        publicDeadline: (value) => {
          return moment(value).format('YYYY.MM.DD')
        }
      }
    }
    return (
      <div className={style.subordinates}>
        <Table
          {...subordinateTable} 
          />
        <Modal
          onRequestClose={() => this.setState({ refuseInvitation: false })}
          active={this.state.refuseInvitation}
          actions={[
            'cancel',
            ::this.refuseInvitation
          ]}
          title="拒绝邀请"
        >
          <div>确定拒绝对方的反馈邀请？</div>
        </Modal>
      </div>
    )
  }
}
